<template>
  <div>
    <MHeader>列表页</MHeader>
    <div class="content" ref="scroll" @scroll="loadMore">
      <ul>

        <router-link v-for="(book,index) in books" :key="index" tag="li" :to="{name:'detail',params:{bid:book.bookId}}">
          <img :src="book.bookCover">
          <div class="info">
            <h4>{{book.bookName}}</h4>
            <p>{{book.bookInfo}}</p>
            <b>{{book.bookPrice}}</b>
            <button @click.stop="delBook(book.bookId)">删除</button>
          </div>
        </router-link>

      </ul>
      <div class="loadmore" @click="getBooks" v-if="showMore">加载更多&#8609</div>
      <div class="loadmore" v-if="!showMore">没有更多内容</div>

    </div>
  </div>
</template>
<script>
import { getBooks, removeBook, getMore } from "../api";
import MHeader from "../base/MHeader.vue";
export default {
  data() {
    return {
      books: [],
      offset: 0,
      showMore: true
    };
  },
  mounted() {
    let distance = 0;
    let scroll = this.$refs.scroll;
    let top = scroll.offsetTop;
    scroll.addEventListener("touchstart", (e) => {
      if (scroll.scrollTop != 0 || scroll.offsetTop != top) return;
      let start = e.touches[0].pageY;
      // console.log(start);
      let move = (e) => {
        let current = e.touches[0].pageY;
        distance = current - start;

        if (distance > 0) {
          distance = (distance > 60 ? 60 : distance)
          // console.log(distance);
          scroll.style.top = distance + top + "px";
        } else {
          scroll.removeEventListener("touchmove", move);
          scroll.removeEventListener("touchend", end);
        }
      };

      let end = (e) => {
        clearInterval(this.resetTimer);
        this.resetTimer = setInterval(() => {
          if (distance <= 0) {
            clearInterval(this.resetTimer);
            distance = 0;
            scroll.style.top = top + "px";
            scroll.addEventListener("touchmove", move);
            scroll.addEventListener("touchmove", end);
            this.books = [];
            this.offset = 0;
            this.getBooks();
            return;
          }
          distance -= 1;
          scroll.style.top = top + distance + "px";
        }, 1)
      };
      scroll.addEventListener("touchmove", move);
      scroll.addEventListener("touchmove", end);


    }, false);
  },
  methods: {

    loadMore() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        let { scrollTop, clientHeight, scrollHeight } = this.$refs.scroll;
        if (scrollTop + clientHeight + 30 > scrollHeight) this.getBooks();
      }, 100);

    },
    async getBooks() {
      let bookList = await getMore(this.offset);
      this.books = [...this.books, ...bookList]
      if (bookList.length < 5) this.showMore = false;
      this.offset = this.books.length;
    },
    async delBook(id) {
      await removeBook(id);
      this.books = this.books.filter(item => item.bookId !== id);
    }
  },
  created() {
    this.getBooks();
  },
  components: {
    MHeader
  }
};
</script>
<style scoped>
.content ul {
  padding: 10px;
}
.content ul li {
  display: flex;
  padding: 5px;
}
.content ul li img {
  width: 80px;
  height: 100%;
}
.content p {
  font-size: 6px;
  line-height: 25px;
}
.info {
  margin: 0 5px;
}
b {
  color: red;
}
.content button {
  display: block;
  width: 60px;
  height: 20px;
  color: orange;
  border: none;
  border-radius: 15px;
}

.loadmore {
  background: cornflowerblue;
  text-align: center;
  line-height: 30px;
  margin-bottom: 10px;
}
</style>

